<template>
  <div class="overview-staff-wrapper">
    <!-- TODO 隐藏分组选择  -->
    <div style="display: flex; align-items: center; background-color: #fff; border-radius: 4px; padding: 16px 24px; margin-bottom: 24px">
      <selectCompanyGroup :siteIds.sync="siteId" :siteName.sync="siteName" :selectTreeId.sync="selectTreeId" />
    </div>
    <CardCount :statusValShow.sync="statusValShow" :siteId="siteId" />
    <ChartCount :siteId="siteId" />
    <Detail :urr="'urr'" :siteId="siteId" :statusValShow="statusValShow" :siteName="siteName" :selectTreeId="selectTreeId" />
  </div>
</template>

<script>
import CardCount from "./components/cardCount";
import ChartCount from "./components/chartCount";
import Detail from "./components/detail";
import selectCompanyGroup from "@/components/SelectCompany";
import { mapGetters } from "vuex";
export default {
  components: {
    CardCount,
    ChartCount,
    Detail,
    selectCompanyGroup
  },
  data() {
    return {
      statusValShow: null,
      selectTreeId: "-1",
      siteId: undefined,
      siteName: undefined,
      treeSiteName: undefined
    };
  },
  computed: {
    ...mapGetters({
      SelectedId: "site/SelectedId",
      SelectedName: "site/SelectedName",
      SelectedAllIds: "site/SelectedAllIds"
    })
  },
  created() {
    // 获取缓存的数据
    this.selectTreeId = this.SelectedId;
    this.siteName = this.SelectedName;
    this.siteId = this.SelectedAllIds;
  }
};
</script>

<style scoped lang="scss">
.overview-staff-wrapper {
  background-color: #f1f1f1;
  .iconfont {
    color: var(--primary);
  }
  .font-title {
    font-size: 16px;
    font-weight: 500;
    color: #55565d;
    line-height: 24px;
  }
}
</style>
